<template>
    <LoadPage :show="show" />
    <view class="main">
        <view class="tab">
            <nut-tabs @change="changeTabs" v-model="current" swipeable align="left" custom-color="#FB4E47"
                :ellipsis="false">
                <nut-tab-pane title="平台排名">
                    <sort :data="dataList" v-if="dataList.length" />
                </nut-tab-pane>
                <nut-tab-pane title="团队排名">
                    <sort :data="dataList" v-if="dataList.length" />
                </nut-tab-pane>
            </nut-tabs>
            <LoadMore :status="status" />

        </view>
    </view>
    <view class="op">
        <view class="op-d">距离上一名还差拉新{{ computedPerson() }}元</view>
    </view>

</template>


<script setup>
import { ref, reactive } from 'vue';
import sort from './components/sort.vue';
import { getSort, getUserInfo } from '@/api/apiList';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';


const dataList = ref([])
let queryTwo = reactive({
    pageNum: 1,
    pageSize: 8,
    pid: ''
})
let status = ref('noMore')
let show = ref(true)
const getDataList = async () => {
    status.value = 'loading';
    const res = await getSort(queryTwo)
    if (res.code == 200) {
        if (res.rows.length) {
            dataList.value = [...dataList.value, ...res.rows]
            dataList.value.forEach(item => {
                item.name = maskLastFour(item.userName)
            })
            status.value = 'noMore'
        } else {
            status.value = 'noMore'
        }
        show.value = false
    }
}

const maskLastFour = (str) => {
    if (str) {
        if (str.length >= 4) {
            return str.slice(0, -4) + '****';
        } else {
            return str;
        }
    }

}

const computedPerson = () => {
    // total pullNew
    let data = dataList.value.filter(item => item.userId == userInfo.value.userId)
    let index = dataList.value.findIndex(item => item.userId == userInfo.value.userId)
    let person = 0
    if (index != -1 && index != 0) {
        let upPerson = dataList.value[index - 1]
        let cPerson = upPerson.total - data[0].total
        person = cPerson
    }
    console.log(data, index, 'data')
    return person
}

const changeTabs = ({ paneKey }) => {
    queryTwo.pid = paneKey == 1 ? userInfo.value.pid : ''
    queryTwo.pageNum = 1
    dataList.value = []
    getDataList()
}

onLoad(async () => {
    await getUser()
    await getDataList()
    computedPerson()
})

onReachBottom(() => {
    queryTwo.pageNum++
    getDataList()
})

onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中',
        icon: 'none'
    })
    dataList.value = []
    queryTwo.pageNum = 1
    await getDataList()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

const userInfo = ref({})
const getUser = async () => {
    const res = await getUserInfo({ userId: '' })
    if (res.code == 200) {
        userInfo.value = res.data
    }
}


const current = ref(0)

</script>
<style lang="scss" scoped>
:deep(.nut-tabs__titles-item) {
    margin: 0 30rpx;
}

:deep(.nut-tab-pane) {
    background-color: transparent;
}

.op {
    background-color: #fff;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    .op-d {
        padding: 20rpx 20rpx 0 0;
        display: flex;
        justify-content: flex-end;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #111111;
    }
}

.main {}
</style>